运维开发实战
NSD DEVweb DAY01
1. html
2. 基本标签用法
3. Form标点及控件

参考菜鸟教程  http://www.runoob.com/
##############################################################################	
● HTML
   超文本传输协议
● CSS
  层叠样式表
● bootsrap
  twitter公司的开源前端框架
● 前端 后端
   前端：html/js ---> 靠近客户的一端  #客户端技术
   后端：服务器/python/java/php     #服务端技术
##############################################################################   
● Web 的工作原理
 & Web 是基于 Internet 的一个多媒体信息服务系统
	–  基于浏览器/服务器模式
	–  由 Web 服务器、 浏览器(Browser)和通信协议三部分
	组成
	–  通信协议采用的是 HTTP 协议:超文本传输协议
	(Hypertext Transfer Protocol)在 
	
 & Web 服务器上, 主要以网页的形式来发布多媒体信
	–  网页采用超文本标记语言 HTML(Hyper Text Markup
	   Language)编写
	   
 & 浏览器软件连接到 Web 服务器并获取网页
	–  浏览器解释 HTML 网页文档,并显示在用户的屏幕上
##############################################################################
Web 服务器   Web 浏览器
##############################################################################
● 超文本
	•  Web 是一个超文本文件的集合
	•  超文本文件是 Web 的基本组成单元,也称为网页或
	   HTML文档、Web页等,通常是以.html或.htm为后缀的
		文件
	•  Web页之间通过超文本中的超级链接组织在一起

● 什么是 HTML
	•  HTML(HyperText Markup Language):超文本标记
	   语言,一种纯文本类型的语言
		–  使用带有尖括号的“标记”将网页中的内容逐一标识出来
	•  用来设计网页的标记语言
	•  用该语言编写的文件,以 .html 或者 .htm 为后缀
	•  由浏览器解释执行
	•  HTML 页面上,可以嵌套用脚本语言编写的程序段,如:
	   VBScript,JavaScript
##############################################################################
● HTML 布局特点
	1. 所有的元素都在html中；
	2. html的直接子元素是 head 和 body
	3. head 负责设置页面属性；
	4. 所有浏览器能看到的都在body中；
	5. 浏览器是宽容的，它会尽最大的努力解释 html
##############################################################################
● 小技巧：
  注释： Ctrl + ?
  标记 TAB补全
##############################################################################
● <head> 元素
•  <head> 元素用于为页面定义全局信息
	–  所有其他头元素的容器
	–  紧跟在起始标签 <html> 之后
•  可包含
	–  title、meta、script、style、link等
	<head>
		<title>HTML 文档</title>
		<meta name="keywords" content="html,css" />
		<script type="javascript"></script>
		<style type="text/css"></style>
	</head>

● 文档头部内容--<title>
•  标题元素 <title></title> 用于为文档定义标题

##############################################################################
使用文本标记
● 特殊字符
   <body>
      &lt;abc&gt;&nbsp;&nbsp;&nbsp;&nbsp;hahahah &iexcl;cal
      <hr>  <!--横线-->
   <!--&nbsp =>空格-->
    <!--浏览器解析结果
   <abc>    hahahah ¡cal-->

● 文本样式
   文本样式的作用是对文本进行修饰,如加粗、倾斜等
	–  <b>...</b>:加粗
	–  <i>...</i>:倾斜
	–  <u>...</u>:下划线
	–  <s>...</s>:删除线
	–  <sup>...</sup>:上标
	–  <sub>...</sub>:下标
##############################################################################
● 块级元素
	— 不管文字多少，都占一行
		<p>hi</p>        
	   <div>你好</div>  
	   <h1>how</h1>
   — 段落元素 <p>      <!--与前后的文本都换行分开-->
   — 横线元素 <hr>	
   — 换行元素 <br>     <!--元素在任何地方创建手工换行-->
   — 分区元素 <div>    <!--分区元素用于为元素分组,常用于页面布局-->

##############################################################################
● 图像元素
	<img src="url" alt="如果图像不出现，则显示该段文字">
   <hr>
●  链接元素
	<a href="https://www.baidu.com">
      <i><u>hello world!</u></i>    
      <!--点击‘hello world’就会跳到baidu--> 
   </a>
●  锚点   
   — 就像word文档的目录一样， 点击目录，可以跳到具体位置
	<h3 id="t1">
      <a href="https://www.jd.com" target="_blink">京东</a><hr>
   </h3>
   ...
   ...
   <a href="#t1">
      <hr>
      <b><u>top</u></b>   <!--在顶部设置标签名,点击‘top’就会跳到顶部--> 
   </a>
##############################################################################
表格 创建一个五行三列的表格
<table border="60px" width="500px">
	tr*5>td*3 TAB键
<table>
##############################################################################
列表
    <ul type="square">    #无序列表
        <li>哈利波特</li>
        <li>赫敏</li>
        <li>马尔福</li>
        <li>伏地魔</li>
        <li>邓布利多</li>
    </ul>
    <hr>
    <ol type="I" start="1">  #有序列表
        <li>哈利波特</li>
        <li>赫敏</li>
        <li>马尔福</li>
        <li>伏地魔</li>
        <li>邓布利多</li>
    </ol>
##############################################################################
Form表单及控件
#搜索栏
<form action="https://www.baidu.com/s" target="_blank">
    <input type="text" placeholder="关键字" name="wd">
    <input type="submit" value="百度搜索">
</form>

#登录栏
<form action="">
    <p><label >用户:</label><input type="text" placeholder="用户名"></p>
    <p><label >密码:</label><input type="password" placeholder="密码"></p>
    <!--密码用password 类型-->
    <p><input type="submit" value="登录" ></p>
</form>
##############################################################################
文本框、选择框  需要结合表单使用  #请参考 devweb/myform.html
<input type="text"  placeholder="关键字" name="q">    #文本输入框
<input type="radio" name="question3" value="A">      #单选框
<input type="checkbox" name="question3" value="A">   #多选框
<input type="password" placeholder="密码">           #以点代替显示内容
<input type="submit" value="百度搜索">                #提交数据到 action
<input type="reset" value="重置">                    #重置输入内容
<input type="button" value="警告" onclick="showme()"> #按钮， onclick之后执行脚本
<input type="file">   #浏览文件系统，通过 input的submit类型上传
##############################################################################
选项框
<form action="">
    <select name="老师" id="teacher" multiple>
        <option value="nb">牛犇</option>
        <option value="wk">王凯</option>
        <option value="dmy">丁明一</option>
        <option value="plj">庞丽静</option>
        <option value="lx">李欣</option>
    </select>
</form>
##############################################################################
多行文本框
<textarea></textarea>






























